export const vDragLeave = {
  name: 'dragleave',
  mounted: (el, binding) => {
    let timer
    const leaveHandler = (event) => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        const relatedTarget = event.relatedTarget
        if (!relatedTarget || !el.contains(relatedTarget)) {
          binding.value(event)
        }
      }, 10)
    }
    el.addEventListener('dragenter', (event) => {
      if (timer) {
        clearTimeout(timer)
      }
    })
    el.addEventListener('dragleave', leaveHandler)

    // 清理工作
    el.$onUnbind = function () {
      el.removeEventListener('dragleave', leaveHandler)
    }
  },
}
export const vSelectLoadMore = {
  name: 'select-load-more',
  beforeMount: (el, binding) => {
    const selectDom = document.querySelector('.single-select-loadmore .el-select-dropdown__wrap')
    function loadMores() {
      // 判断是否到底
      const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (isBase) {
        binding.value && binding.value()
      }
    }
    //将获取到的dom和函数挂载到el-select上，实例销毁时好处理
    el.selectDomInfo = selectDom
    el.selectLoadMore = loadMores
    // 监听滚动事件
    selectDom?.addEventListener('scroll', loadMores.bind(selectDom))
  },
  beforeUnmount(el) {
    if (el.selectLoadMore && el.selectDomInfo) {
      el.selectDomInfo.removeEventListener('scroll', el.selectLoadMore)
      delete el.selectDomInfo
      delete el.selectLoadMore
    }
  },
}
export const vSelectTagDel = {
  name: 'select-tag-del',
  mounted: (el, binding) => {
    const [defaultValues, selectValue] = binding.value
    // 需要隐藏的标签索引
    const indexs = []
    selectValue.map((item, index) => {
      defaultValues.map((defaultItem) => {
        if (item === defaultItem.userId) {
          indexs.push(index)
        }
      })
    })
    const dealStyle = function (tags) {
      tags.forEach((el, index) => {
        if (indexs.includes(index) && ![...el.classList].includes('select-tag-close-none')) {
          el.style.display = 'none'
        }
      })
    }
    // 设置样式隐藏 close icon
    let tags = el.querySelectorAll('.el-tag__close')

    if (tags.length === 0) {
      // 初始化tag为空处理
      setTimeout(() => {
        let tagTemp = el.querySelectorAll('.el-tag__close')
        dealStyle(tagTemp)
      })
    } else {
      setTimeout(() => {
        dealStyle(tags)
      })
    }
  },
}
// 防抖 防止重复提交
export const useDebounceDirective = (delay) => {
  return {
    beforeMount(el, binding) {
      let timer = null
      el.addEventListener(binding.arg, () => {
        clearTimeout(timer)
        timer = setTimeout(() => {
          binding.value()
        }, delay)
      })
    },
  }
}

// 节流指令封装
export const useThrottleDirective = (delay) => {
  return {
    beforeMount(el, binding) {
      let throttled = false
      el.addEventListener(binding.arg, () => {
        if (!throttled) {
          throttled = true
          setTimeout(() => {
            binding.value()
            throttled = false
          }, delay)
        }
      })
    },
  }
}
